<template>
    <my-dialog v-model="state.dlgVisible" :title="title" :width="width">
        <div style="border-bottom:1px solid #ccc;">
            <el-checkbox v-model="checkAll">全选</el-checkbox>
        </div>
        <draggable v-model="items" :disabled="disabled" item-key="@">
            <template #item="{ element: item }">
                <div style="border-bottom:1px solid #ccc;">
                    <el-checkbox v-model="item._check">{{ item.label }}</el-checkbox>
                </div>
            </template>
        </draggable>
        <template #footer>
            <el-button @click="state.dlgVisible = false">取消</el-button>
            <el-button type="primary" @click="onOk">确定</el-button>
        </template>
    </my-dialog>
</template>

<script>
export default {
    name: "MySelectItemsDialog",
    emits: ["selected"],
    props: {
        title: String,
        modelValue: Array,
        disabled: Boolean,
        width: {
            type: [Number, String],
            default: 500,
        },
    },
    data() {
        return {
            state: {
                dlgVisible: false
            },
            checkAll: true,
            items: []
        }
    },
    watch: {
        checkAll(val) {
            this.items.forEach(x => x._check = val);
        }
    },
    methods: {
        open() {
            this.items = this.modelValue || [];
            this.state.dlgVisible = true;
        },
        onOk() {
            let vals = this.items.filter(x => x._check);
            this.$emit("selected", vals);
            this.state.dlgVisible = false;
        }
    }
}
</script>